import React,{ Component } from "react"
import {Link} from "react-router-dom"
import { Carousel, WingBlank } from 'antd-mobile';
import {connect} from "react-redux";
import {getBanner,getRecommendList,getActivityList} from "../../store/action/indexAction";
import BScroll from 'better-scroll'
import "./index.css"

class Index extends Component{
    
    componentDidMount() {
        this.props.getBanner();
        this.props.getRecommendList();
        this.props.getActivityList();
        this.listScroll();
      

    }


    listScroll(){
        let len = 8;
        let oW = 3;
        this.refs["recommendlist"].style.width = len*oW+"rem";
        this.scroll = new BScroll(this.refs["recommend"], {
            startX:0,
            click:true,
            scrollX:true,
            scrollY:false,
            eventPassthrough:"vertical"
        });
    }

    toToDetail(id){
        this.props.history.push("/detail/"+id);
    }

    render(){
        let {banner,recommend,activity} = this.props.indexReducer;
        return(
            <div className="index">
                <WingBlank>
                    <Carousel autoplay={true} infinite>
                        {banner.map((item,index)=>(
                            <a key={index} href="javascript:;" style={{display:'inline-block',width:'100%',height:176}}>
                                <img
                                    src={item.imgurl}
                                    alt=""
                                    style={{width:'100%',verticalAlign:'top'}}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event('resize'));
                                    }}/>
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>

                <div className="recommend">
                    <div className="top">
                        <span>精选推荐</span>
                        <Link to="/all">全部商品></Link>
                    </div>
                    
                    <div className="recommend-list" ref="recommend">
                        <ul ref="recommendlist">
                            {recommend.map(item=>{
                                return <li key={item.id} 
                                           onClick={this.toToDetail.bind(this,item.id)}>
                                          <img src={item.imgurl} alt=""/>
                                          <p className="name">{item.title}</p>
                                          <p className="desc">{item.desc}</p>
                                          <p className="price">￥{item.price}</p>
                                       </li>
                            })}
                            
                        </ul>
                    </div>

                </div>

                <div className="activity">
                    {activity.map(item=>{
                        return  <div className="item" key={item.id}>
                                    <img src={item.imgurl} alt=""/>
                                    <p className="title">{item.title}</p>
                                    <p className="desc">{item.desc}</p>
                                    <p className="info">
                                      <span className="browse"><i></i>{item.browse}</span>
                                      <span className="msg"><i></i>{item.msg}</span>
                                      <span className="like"><i></i>{item.like}</span>
                                    </p>
                                </div>
                        })
                    }
                </div>
            </div>
		)
	}
}


const mapStateToProps = state => {
    return {
        indexReducer:state.indexReducer
    }
}


const mapDispatchToProps = dispatch => {
    return{
        getBanner:function(){
            dispatch(getBanner());
        },
        getRecommendList:function(){
            dispatch(getRecommendList());
        },
        getActivityList:function(){
            dispatch(getActivityList());
        }
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(Index)